{extend name="public:base" /}
{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight" xmlns="http://www.w3.org/1999/html">
    <div class="row">
        <div class="col-lg-6">
            <div class="ibox ">
                <div class="ibox-title">
                    <div class="row">
                        <div class="col-lg-10">
                            <button type="button" class="btn btn-w-m btn-primary" data-toggle="modal"
                                    data-target="#add-form"
                                    href="{:url('add',['sealId'=>$seal.id])}">添加
                            </button>
                        </div>
                        <div class="col-lg-2">
                            <button type="button" class="btn btn-w-m btn-primary" id="delall">批量删除</button>
                        </div>
                    </div>

                </div>
                <div class="ibox-content">
                    <div class="table-responsive">
                        <table class="table table-striped datalist-table approval-table">
                            <thead>
                            <tr>
                                <th data-sort-ignore="true">审批类型</th>
                                <th data-sort-ignore="true">备注</th>
                                <th data-sort-ignore="true">自由审批</th>
                                <th data-sort-ignore="true">状态</th>
                                <th data-sort-ignore="true">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {notempty name="list"}
                            {volist name="list" id="vo"}
                            <tr data-id="{$vo.id}">
                                <td class="td-cell">{$vo.type_name}</td>
                                <td class="td-cell">{$vo.file_remark}</td>
                                <td class="td-cell">{$vo.is_free_txt}</td>
                                <td class="td-cell">{$vo.status_txt}</td>
                                <td class="project-actions">
                                    <button data-url="{:url('show',['id'=>$vo.id],'json')}"
                                            class="btn btn-warning btn-sm edit-btn"><i
                                            class="fa fa-edit"></i> 修改
                                    </button>
                                    <a href="{:url('delete',['id'=>$vo.id],'json')}"
                                       class="btn btn-danger btn-sm edit-btn ajax-del"><i class="fa fa-trash-o"></i>
                                        删除 </a>
                                </td>
                            </tr>
                            {/volist}
                            {/notempty}
                            </tbody>
                        </table>
                    </div>
                    {$list->render()}
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="ibox ">
                <div class="ibox-content">
                    <form method="post" action="{:url('updateSetting',[],'json')}">
                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">审批类型</label>
                                <div class="col-sm-10" autocomplete="off">
                                    <input disabled type="text" class="form-control" name="name"></input>
                                </div>
                                <div class="hr-line-dashed"></div>
                            </div>
                            <div class="form-group row">
                                <input type="hidden" name="id" value="">
                                <input type="hidden" name="__token__">
                                <label class="col-sm-2 col-form-label">审批人</label>
                                <div class="col-sm-10" autocomplete="off">
                                    <select class="form-control dual_select required-validate" name="approvers[]"
                                            multiple>
                                        {notempty name="users"}
                                        {volist name="users" id="vo"}
                                        <option value="{$vo.id}">{$vo.account}</option>
                                        {/volist}
                                        {/notempty}
                                    </select>
                                </div>
                                <div class="hr-line-dashed"></div>
                            </div>
                            <div class="form-group row">
                                <div class="col-sm-8 col-sm-offset-4">
                                    <button type="button" class="btn btn-w-m btn-default back-page">返回</button>
                                    <button type="button" class="btn btn-w-m btn-primary ajax-form-button">提交</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="add-form" class="modal fade" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <h3 class="m-t-none m-b">审批类型</h3>
                            <form role="form" action="{:url('add',['sealId'=>$seal.id],'json')}" id="position-form"
                                  class="ajax-form">
                                <div class="form-group">
                                    <label>自由审批：</label>
                                    <div class="radio i-checks">
                                        <label>
                                            <input type="radio" name="is_free" value="1">
                                            <i></i> 否
                                        </label>
                                        <label>
                                            <input type="radio" name="is_free" value="2" checked="checked">
                                            <i></i> 是
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>类型名称：</label>
                                    <input type="text" name="type_name" autocomplete="off" placeholder="请输入类型名称"
                                           class="form-control required-validate">
                                </div>
                                <div class="form-group">
                                    <label>排序值：</label>
                                    <input type="number" name="sort" autocomplete="off" placeholder="请输入职位名称"
                                           class="form-control required-validate">
                                </div>
                                <div class="form-group">
                                    <label>状态：</label>
                                    <select class="form-control m-b" name="status">
                                        <option value="1" selected>可用</option>
                                        <option value="2">禁用</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>类型备注：</label>
                                    <textarea class="form-control message-input" autocomplete="off" name="file_remark"
                                              placeholder="请输入类型备注"></textarea>
                                </div>
                                <div>
                                    <button class="btn btn-sm btn-primary float-right m-t-n-xs" type="submit">
                                        <strong>确定</strong>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="edit-form" class="modal fade" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <h3 class="m-t-none m-b">审批类型</h3>
                            <form role="form" action="{:url('edit',['sealId'=>$seal.id],'json')}"
                                  class="ajax-form">
                                <input type="hidden" name="id" value="">
                                <div class="form-group">
                                    <label>自由审批：</label>
                                    <div class="radio i-checks">
                                        <label>
                                            <input type="radio" name="is_free" value="1">
                                            <i></i> 否
                                        </label>
                                        <label>
                                            <input type="radio" name="is_free" value="2" checked="checked">
                                            <i></i> 是
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>类型名称：</label>
                                    <input type="text" name="type_name" placeholder="请输入类型名称"
                                           class="form-control required-validate">
                                </div>
                                <div class="form-group">
                                    <label>排序值：</label>
                                    <input type="number" name="sort" placeholder="请输入职位名称"
                                           class="form-control required-validate">
                                </div>
                                <div class="form-group">
                                    <label>状态：</label>
                                    <select class="form-control m-b" name="status">
                                        <option value="1" selected>可用</option>
                                        <option value="2">禁用</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>类型备注：</label>
                                    <textarea class="form-control message-input" name="file_remark"
                                              placeholder="请输入类型备注"></textarea>
                                </div>
                                <div>
                                    <button class="btn btn-primary float-right m-t-n-xs" type="submit">
                                        <strong>确定</strong>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="css"}
<link href="__ADMIN__/css/plugins/dualListbox/bootstrap-duallistbox.min.css" rel="stylesheet">
<style type="text/css">
    .approval-table > tbody > tr {
        cursor: pointer;
    }

    .approval-table .selected {
        box-shadow: inset 0px 0px 8px 1px #d5d5d5;
        animation: boxShadow 3s linear infinite alternate;
        background: white;
    }
    @keyframes boxShadow{
        0%{box-shadow:  0px 0px 8px 1px #d5d5d5;}
        100%{box-shadow:  0px 0px 13px 6px #d5d5d5;}
    }
</style>
{/block}
{block name="js"}
<!-- Dual Listbox -->
<script src="__ADMIN__/js/plugins/dataTables/datatables.min.js"></script>
<script src="__ADMIN__/js/plugins/dataTables/dataTables.bootstrap4.min.js"></script>
<script src="__ADMIN__/js/plugins/dualListbox/jquery.bootstrap-duallistbox.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".datalist-table").on("click", ".edit-btn", function (e) {
            e.preventDefault();
            $el = $(this)
            $form = $("#edit-form");
            loadingDetail($(e.currentTarget).data("id"), $el.data('url')).then(data => {
                $form.find("input[name='id']").val(data.data.id);
                $form.find("input[name='sort']").val(data.data.sort);
                $form.find("textarea[name='file_remark']").text(data.data.file_remark);
                $form.find("input[name='is_free'][value='" + data.data.is_free + "']").prop("checked", true);
                $form.find("input[name='status'][value='" + data.data.status + "']").prop("selected", true);
                $form.find("input[name='type_name']").val(data.data.type_name);
                $form.modal("show");
            });
        });

        function loadingDetail(id, url) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url,
                    type: "get",
                    dataType: "json",
                    success: function (res) {
                        resolve(res);
                    },
                    error: function (err) {
                        reject(err);
                    }
                });
            })
        }

        let $approval = $('.approval-table');
        $approval.on('click', '.td-cell', function (e) {
            e.preventDefault();
            let $this = $(this).parents("tr");
            if ($this.hasClass('selected')) {
                $this.removeClass('selected');
                bootstrapDualListbox.bootstrapDualListbox('setSelectedItem', function (item) {
                    return -1;
                });
            } else {
                $approval.find('tr.selected').removeClass('selected');
                $this.addClass('selected');
                getSelected($this)
            }
        });

        let bootstrapDualListbox = $('.dual_select').bootstrapDualListbox({
            nonSelectedListLabel: '未选择',
            selectedListLabel: '已选择',
            filterTextClear: '展示所有',
            filterPlaceHolder: '过滤搜索',
            moveOnSelect: false,
            moveOnDoubleClick: true,
            sortByInputOrder: true,
            moveSelectedLabel: "添加",
            moveAllLabel: '添加所有',
            removeSelectedLabel: "移除",
            setSelectedListLabel: '已选择的{0}',
            removeAllLabel: '移除所有',
            infoText: '共{0}个',
            infoTextFiltered: '搜索到{0}个组 ,共{1}个组',
            infoTextEmpty: '列表为空',
            selectorMinimalHeight: 160
        });
        bootstrapDualListbox.bootstrapDualListbox('setHelperSelectNamePostfix', '_');
        bootstrapDualListbox.bootstrapDualListbox('setShowFilterInputs', false, true);
        $(".ajax-form-button").on("click", function () {
            $form = $(this).parents("form");
            $id = $form.find("[name='id']").val();
            if (!($id - 0)) {
                toast.warning("请选择一个左边的审批类型",{duration:1000});
                return;
            }
            let length = $form.find("select[name='approvers[]_2']").find("option").length;
            if (length <= 0) {
                toast.warning("请配置审批人").then(function () {
                    $form.find("select[name='approvers[]_2']").focus();
                });
                return;
            }
            var formData = $form.serialize();
            $.post($form.attr("action"), formData, function (res, status, xhr) {
                console.log($form.find("[name='__token__']"));
                if (xhr.getResponseHeader('__token__')) {
                    $form.find("[name='__token__']").val(xhr.getResponseHeader('__token__'));
                }
                if (res.code === 1) {
                    toast.success(res.msg, {duration: (res.wait || 3) * 1000})
                } else {
                    toast.error(res.msg, {duration: (res.wait || 3) * 1000})
                }
            }, 'json');
        })

        function getSelected($el) {
            $.ajax({
                url: "{:url('show',[],'json')}?id=" + $el.data("id"),
                type: 'post',
                success: function (res, status, xhr) {
                    let $button = $(".ajax-form-button");
                    if (xhr.getResponseHeader('__token__')) {
                        $button.parents("form").find("[name='__token__']").val(xhr.getResponseHeader('__token__'));
                    }
                    $button.parents("form").find("[name='id']").val(res.data.id);
                    $button.parents("form").find("[name='name']").val(res.data.type_name);
                    let map = res.data.approvers.map((item) => ({
                        ...item.user,
                        position: item.sort
                    })).filter(item => !!item);
                    const selectedIds = map.map((item) => item.id + "");
                    const userMap = {};
                    map.forEach(item => {
                        userMap[item.id + ""] = item.position;
                    })
                    bootstrapDualListbox.bootstrapDualListbox('setSelectedItem', function (item) {
                        let itemValue = $(item).attr("value");
                        let newVar = selectedIds.includes(itemValue + "") ? (Number(userMap[itemValue]) + 1) : -1;
                        return newVar;
                    }, true);
                }
            });
        }
    });
</script>
{/block}